import React from 'react';
import { Child } from './Child';

export class App extends React.Component {
  constructor() {
    super();
    console.log('1 constructor');
    this.state = {
      count: 1,
    };
  }

  render() {
    console.log('2 render');
    // 包括但不限于在 render 方法中使用
    return (
      <div id="123">
        App {this.state.count}
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
            // 强制更新
            // this.forceUpdate();
          }}
        >
          按钮
        </button>
        {this.state.count > 3 ? <div>bye bye</div> : <Child />}
      </div>
    );
  }

  // 组件挂载完毕
  componentDidMount() {
    console.log('3 componentDidMount');
  }

  // 组件更新完毕
  componentDidUpdate() {
    console.log('4 componentDidUpdate');
  }
}
